<template>
    <view class="contract_info_components contract_person">
        <div class="step_div">
            <div class="li" :class="step > 0 ? ' li_active' : ''" @click="stepClick()">
                <div class="num">1</div>
                <div class="p">个人身份信息</div>
            </div>
            <div class="line"></div>
            <div class="li" :class="step > 1 ? ' li_active' : ''" @click="stepClick()">
                <div class="num">2</div>
                <div class="p">提现账户</div>
            </div>
        </div>
        <div v-if="step == 1">
            <div style="height:24rpx"></div>
            <div class="pub_input">
                <div class="li li_nobottom">
                    <div class="title"><text class="xing">*</text> 身份证上传</div>
                    <div class="imgs">
                        <div class="img_box" @click="chooseImage('id_card_front_img')">
                            <image class="icon" mode="aspectFit"
                                :src="form.auth_subject_info.id_card_front_img || 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_41.png'" />
                            <div class="p">点击上传 <text class="txt">正面</text></div>
                        </div>
                        <div class="img_box" @click="chooseImage('id_card_back_img')">
                            <image class="icon" mode="aspectFit"
                                :src="form.auth_subject_info.id_card_back_img || 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_42.png'" />
                            <div class="p">点击上传 <text class="txt">反面</text></div>
                        </div>
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 入驻协议</div>
                    <div class="imgs" v-if="form.auth_subject_info.protocol_img.length<10 && isEdit">
                        <div class="img_box" @click="chooseImage('protocol_img')">
                            <image class="icon" mode="aspectFit"
                                :src="'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_43.png'" />
                            <div class="p">点击上传 <text class="txt">协议</text></div>
                        </div>
                    </div>
                    <div class="imgs_show">
                        <div class="img_box" v-for="(li,key) in form.auth_subject_info.protocol_img" :key="key">
                            <image class="icon" mode="aspectFill" :src="li" />
                            <div class="p" v-if="isEdit" @click="form.auth_subject_info.protocol_img.splice(key,1)">删除</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pub_input">
                <div class="li">
                    <div class="title"><text class="xing">*</text> 姓名</div>
                    <div class="input">
                        <input class="inp" type="text" v-model="form.auth_subject_info.real_name" :disabled="!isEdit"
                            placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 性别</div>

                    <div class="input input_right">
                        <picker :value="form.auth_subject_info.sex_index" :range="options.sex" :disabled="!isEdit"
                            @change="(data) => pickerChange('sex', data)">
                            <input class="inp" type="text" :value="form.auth_subject_info.sex" placeholder="请选择"
                                placeholder-style="color:#bbb" disabled>
                            <image class="right_icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                        </picker>
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 身份证号</div>
                    <div class="input">
                        <input class="inp" type="text" v-model="form.auth_subject_info.card_number" :disabled="!isEdit"
                            placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 个人住宅地址</div>
                    <div class="input">
                        <textarea class="texta" v-model="form.auth_subject_info.address" :disabled="!isEdit"
                            placeholder="请输入" placeholder-style="color:#bbb" :maxlength="-1"></textarea>
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 身份证有效期</div>
                    <div class="input">
                        <input class="inp" type="text" :value="form.auth_subject_info.expire_date" :disabled="!isEdit"
                            placeholder="请输入" placeholder-style="color:#bbb">
                        <!-- <image class="right_icon" mode="aspectFit" src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" /> -->
                    </div>
                </div>
            </div>
            <div style="height:48rpx"></div>
            <div v-if="isEdit">
                <div class="pub_btn pub_btn_big_normal" @click="btnClick">下一步</div>
                <div style="height:48rpx"></div>
            </div>
        </div>
        <div v-if="step == 2">
            <div style="height:24rpx"></div>
            <div class="pub_input">
                <div class="li">
                    <div class="title"><text class="xing">*</text> 银行卡卡号面</div>
                    <div class="imgs">
                        <div class="img_box" @click="chooseImage('bank_card_img')">
                            <image class="icon" mode="aspectFit"
                                :src="form.bank_card_info.bank_card_img || 'https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_45.png'" />
                            <div class="p">点击上传 <text class="txt">正面</text></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pub_input">
                <div class="li">
                    <div class="title"><text class="xing">*</text> 认证类型</div>
                    <div class="input">
                        <input class="inp" type="text" placeholder="请输入" placeholder-style="color:#bbb" disabled
                            value="个人商户">
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 开户银行</div>
                    <div class="input">
                        <input class="inp" type="text" v-model="form.bank_card_info.bank_name" :disabled="!isEdit"
                            placeholder="请输入" placeholder-style="color:#bbb" value="个人商户">
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 持卡人姓名</div>
                    <div class="input">
                        <input class="inp" type="text" v-model="form.bank_card_info.holder_name" :disabled="!isEdit"
                            placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 银行卡预留手机号</div>
                    <div class="input">
                        <input class="inp" type="number" maxlength="11" v-model="form.bank_card_info.bank_phone"
                            :disabled="!isEdit" placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 银行卡类型</div>
                    <div class="input input_right">
                        <picker :value="form.bank_card_info.bank_card_type_key" range-key="name"
                            :range="options.bank_card_type" :disabled="!isEdit"
                            @change="(data) => pickerChange('bank_card_type', data)">
                            <input class="inp" type="text" :value="form.bank_card_info.bank_card_type_name"
                                placeholder="请选择" placeholder-style="color:#bbb" disabled>
                            <image class="right_icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                        </picker>
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 银行卡号</div>
                    <div class="input">
                        <input class="inp" type="text" v-model="form.bank_card_info.bank_card_number" :disabled="!isEdit"
                            placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
                <div class="li">
                    <div class="title"><text class="xing">*</text> 开户行支行</div>
                    <div class="input">
                        <input class="inp" type="text" v-model="form.bank_card_info.opening_branch" :disabled="!isEdit"
                            placeholder="请输入" placeholder-style="color:#bbb">
                    </div>
                </div>
            </div>
            <div style="height:16rpx"></div>
            <div class="rules">
                <div class="p_1">提现规则</div>
                <div class="p_2">1、按D+1（自然日的次日进行自动提现）</div>
                <div class="p_2">2、单笔任意金额，按0.6%扣除手续费，另提现需要1元代收费。如：支付1笔100元，实际到账=100-（100*0.6%）-1=98.4元</div>
            </div>
            <div style="height:50rpx"></div>
            <div v-if="isEdit">
                <div class="pub_btn pub_btn_big_normal" @click="btnClick">提交认证</div>
                <div class="pub_btn_normal pub_btn_normal_no" @click="step = 1">返回上一步</div>
                <div style="height:48rpx"></div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            step: 0,
            isEdit: true,//true能编辑
            options: {
                sex: ['男', '女'],
                // 0：不能识别; 1：借记卡; 2：贷记卡（原信用卡大部分为贷记卡）; 3：准贷记卡; 4：预付费卡
                bank_card_type: [
                    { name: '借记卡', value: 1 },
                    { name: '贷记卡', value: 2 },
                    { name: '准贷记卡', value: 3 },
                    { name: '预付费卡', value: 4 }
                ],
            },
            form: {
                auth_type: 1,//认证类型，1：个人认证，2：企业认证
                // 认证主体信息
                auth_subject_info: {
                    id_card_front_img: "",//身份证正面图片地址
                    id_card_back_img: "",//身份证反面图片地址
                    protocol_img: [],//入驻协议图片地址
                    real_name: "",//真实姓名
                    sex: "",//性别
                    sex_index: "",//性别_index
                    card_number: "",//身份证号码
                    address: "",//地址
                    expire_date: ""//身份证有效期
                },
                // 银行卡认证信息
                bank_card_info: {
                    bank_card_img: "",//银行卡图片地址
                    bank_name: "",//银行名称
                    holder_name: "",//银行卡持有人
                    bank_card_type: "",//银行卡类型，0：不能识别; 1：借记卡; 2：贷记卡（原信用卡大部分为贷记卡）; 3：准贷记卡; 4：预付费卡
                    bank_card_type_name: '',
                    bank_card_type_key: '',
                    bank_card_number: "",//银行卡号
                    bank_phone: "",//预留电话
                    opening_branch: ""//开户支行
                }
            },
        };
    },
    mounted() {
        this.getContractInfo();
    },
    methods: {
        stepClick() {
            if (!this.isEdit) {
                this.step = this.step == 1 ? 2 : 1;
            }
        },
        async getContractInfo() {
            this.$comFun.openLoading();
            const res = await this.$request.get('mobile/manager/getAuthInfo', { auth_type: 1 });
            // console.log(res);
            this.$comFun.closeLoading();
            this.step = 1;
            if (res.code == 200 && res.data) {
                // this.contractInfo = res.data;
                if (res.data.status > 0) {
                    res.data.auth_subject_info.sex_index = this.options.sex.findIndex(li => { return li == res.data.auth_subject_info.sex });

                    res.data.auth_subject_info.protocol_img = res.data.auth_subject_info.protocol_img ? res.data.auth_subject_info.protocol_img.split(",") : []

                    let bank_key = this.options.bank_card_type.findIndex(li => {
                        return li.value == res.data.bank_card_info.bank_card_type;
                    })
                    if (bank_key != -1) {
                        res.data.bank_card_info.bank_card_type_key = bank_key;
                        res.data.bank_card_info.bank_card_type_name = this.options.bank_card_type[bank_key].name
                    }

                    for (let key in this.form.auth_subject_info) {
                        if (key in res.data.auth_subject_info) {
                            this.form.auth_subject_info[key] = res.data.auth_subject_info[key];
                        }
                    }
                    for (let key in this.form.bank_card_info) {
                        if (key in res.data.bank_card_info) {
                            this.form.bank_card_info[key] = res.data.bank_card_info[key];
                        }
                    }
                }

                this.isEdit = (res.data.status == 0 || res.data.status == 3) ? true : false;
            }
        },
        chooseImage(type) {
            if (!this.isEdit) return;
            let formData = {};
            if (type == 'id_card_front_img') formData = { ocr: 'id_card', card_side: 'front' };
            if (type == 'id_card_back_img') formData = { ocr: 'id_card', card_side: 'back' };
            if (type == 'bank_card_img') formData = { ocr: 'bank_card' };

            const that = this;
            let count = 1;
            if (type == 'protocol_img') {
                count = (10 - this.form.auth_subject_info.protocol_img.length)
            }
            uni.chooseImage({
                count: count, //默认9
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                success: async function (res) {
                    // console.log(JSON.stringify(res.tempFilePaths));
                    if (type == 'protocol_img') {
                        for (let i = 0; i < res.tempFilePaths.length; i++) {
                            let uploadRes = await that.$request.uploadFile(res.tempFilePaths[i], formData);
                            // console.log(uploadRes);
                            if (uploadRes.code == 200) {
                                that.dealImgInfo(type, uploadRes.data);
                            } else {
                                that.$comFun.toast(uploadRes.msg);
                            }
                        }
                    } else {
                        let url = res.tempFilePaths[0];
                        let uploadRes = await that.$request.uploadFile(url, formData);
                        // console.log(uploadRes);
                        if (uploadRes.code == 200) {
                            that.dealImgInfo(type, uploadRes.data);
                        } else {
                            that.$comFun.toast(uploadRes.msg);
                        }
                    }
                }
            });
        },
        async dealImgInfo(type, data) {
            let url = `${data.file_path}`;
            // const res = await this.$request.get(`mobile/upload/get`, {path:data.file_path});
            // // console.log(res);
            // if (res.code == 200) {
            //     url = res.data;
            // }
            if (type == 'id_card_front_img') {
                this.form.auth_subject_info['id_card_front_img'] = url;
                for (let key in this.form.auth_subject_info) {
                    if (key in data) {
                        this.form.auth_subject_info[key] = data[key];
                    }
                }
            }
            if (type == 'id_card_back_img') {
                this.form.auth_subject_info['id_card_back_img'] = url;
                this.form.auth_subject_info['expire_date'] = data.expire_date;
            }
            if (type == 'protocol_img') {
                this.form.auth_subject_info['protocol_img'].push(url);
            }
            if (type == 'bank_card_img') {
                this.form.bank_card_info['bank_card_img'] = url;
                for (let key in this.form.bank_card_info) {
                    if (key in data) {
                        this.form.bank_card_info[key] = data[key];
                    }
                }

                let bank_key = this.options.bank_card_type.findIndex(li => {
                    return li.value == data.bank_card_type
                })
                if (bank_key != -1) {
                    this.form.bank_card_info['bank_card_type_key'] = bank_key;
                    this.form.bank_card_info['bank_card_type_name'] = this.options.bank_card_type[bank_key].name
                }
            }
        },
        pickerChange(type, e) {
            // console.log(type, e.detail.value);
            if (type == 'sex') {
                this.form.auth_subject_info['sex_index'] = e.detail.value;
                this.form.auth_subject_info['sex'] = this.options.sex[e.detail.value];
            }
            if (type == 'bank_card_type') {
                this.form.bank_card_info['bank_card_type_key'] = e.detail.value;
                this.form.bank_card_info['bank_card_type'] = this.options.bank_card_type[e.detail.value].value;
                this.form.bank_card_info['bank_card_type_name'] = this.options.bank_card_type[e.detail.value].name;
            }
        },
        btnClick() {
            const that = this;
            let form = JSON.parse(JSON.stringify(this.form));
            console.log(form);
            delete form.auth_subject_info.sex_index;
            delete form.bank_card_info.bank_card_type_name;
            delete form.bank_card_info.bank_card_type_key;

            if (this.step == 1) {
                let find = Object.keys(form.auth_subject_info).find(key => {
                    return form.auth_subject_info[key] == '';
                });
                if (find) {
                    this.$comFun.toast('请将内容填写完整');
                    return;
                }
                this.step = 1.5;
                setTimeout(() => {
                    this.step = 2;
                }, 100)
            } else if (this.step == 2) {
                let find_2 = Object.keys(form.bank_card_info).find(key => {
                    return form.bank_card_info[key] == '';
                });
                if (find_2) {
                    this.$comFun.toast('请将内容填写完整');
                    return;
                }
                form.auth_subject_info.protocol_img = form.auth_subject_info.protocol_img.join(",");
                form.auth_subject_info = JSON.stringify(form.auth_subject_info);
                form.bank_card_info = JSON.stringify(form.bank_card_info);
                console.log(form);
                uni.showModal({
                    title: '提示',
                    content: '是否确定提交个人认证信息？提交审核通过后不可修改',
                    success: function (res) {
                        if (res.confirm) {
                            that.toSubmit(form);
                        }
                    }
                });

            }
        },
        async toSubmit(form) {
            this.$comFun.openLoading();
            const res = await this.$request.post('mobile/manager/submitAuthInfo', form);
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.$comFun.toast('提交成功');
                setTimeout(() => {
                    this.$comFun.closeWin();
                }, 1000)
            } else {
                this.$comFun.toast(res.msg);
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/manage.scss";
</style>
